<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 1. 准备"容器" -->
  <div id="container"></div>
  <!-- 2. 引入react -->
  <!-- 2.1 引入 react 核心库 -->
  <script src="../js/react.development.js"></script>
  <!-- 2.2 引入 react-dom，用于支持 react 操作 DOM -->
  <script src="../js/react-dom.development.js"></script>
  <!-- 2.3 因为要使用 jsx，所以要使用 babel 来将 jsx 转换为 js -->
  <script src="../js/babel.min.js"></script>
  <!-- 3. 注意这里一定要写 babel，才会识别并转换 jsx  -->
  <script>
    // 1. 创建一个虚拟 DOM；注意这里一定不要写引号
    const vDom = React.createElement('h1', { id: 'title' }, 'Hello React');
    // 2. 将虚拟 DOM 渲染到容器中
    ReactDOM.render(vDom, document.getElementById('container'));
  </script>
</body>
</html>